<template>
  <div class="map_box">
    <!-- <p>{{map_obj.lng}}</p> -->
    <div id="container"></div>

    <!-- <div>
      <label>图层透明度：</label>
      <span id="opa-val">-</span>
      <br>
      <input
        id="opacity"
        type="range"
        value="0.6"
        min="0"
        max="1"
        step="0.01"
        oninput="setOpacity(this.value)"
        onchange="setOpacity(this.value)"
      >
    </div>-->
    <div class="input-card">
      <h4>左击获取经纬度：</h4>
      <div class="input-item">
        <input type="text" readonly="true" id="lnglat">
      </div>
    </div>
  </div>
</template>
<script
      type="text/javascript"
      src="https://cache.amap.com/lbs/static/addToolbar.js"
    ></script>
<script>
export default {
  mounted() {
    this.init_map();
  },
  // beforeDestoy() {
  //   this.map_obj = {};
  //
  // },
  data() {
    return {
      map: {},
      marker_old: {}
    };
  },
  props: ["map_obj", "weather_list"],
  methods: {
    init_map() {
      //
      // console.log(this.weather_list);

      var googleLayer = new AMap.TileLayer({
        getTileUrl:
          "http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile"
      }); //定义谷歌卫星切片图层

      var roadNetLayer = new AMap.TileLayer.RoadNet(); //定义一个路网图层

      var imageLayer = new AMap.ImageLayer({
        // url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
        // url: "file://C:/Users/Administrator/Desktop/l1.png",
        bounds: new AMap.Bounds(
          [125.01057, 44.527368], //左下角
          [125.015291, 44.53055] //右上角
        ),

        zooms: [10, 18]
      });
      //设置透明度
      imageLayer.setOpacity(0.5);

      var map = new AMap.Map("container", {
        //center: [114.479347,36.536979], //邯郸
        //center:[116.408967,39.880101],
        // center: [125.013102, 44.537785], //吉林省农安县万顺乡农家堰
        //center:[105.606322,30.154596],//红蜻蜓
        zoom: 5, //设置缩放级别
        layers: [googleLayer, roadNetLayer, imageLayer], //设置图层
        zooms: [1, 23],
        showLabel: true,
        pitch: 55,
        forceVector: false,
        resizeEnable: true,
        expandZoomRange: true
      });
      this.map = map;
      var this_ = this;

      map.on("rightclick", function(e) {
        document.getElementById("lnglat").value =
          e.lnglat.getLng() + "," + e.lnglat.getLat();

        var lng_lat = {
          lng: e.lnglat.getLng(),
          lat: e.lnglat.getLat()
        };
        this_.$emit("lng_lat", lng_lat);

        addMarker(lng_lat);
      });
      var this_ = this;
      // 实例化点标记
      function addMarker(e) {
        var marker = null;
        if (this_.marker_old) {
          map.remove(this_.marker_old);
        }

        marker = new AMap.Marker({
          // icon:
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          icon: icon_(),
          position: [e.lng, e.lat],
          offset: new AMap.Pixel(-13, -32)
        });
        this_.marker_old = marker;
        marker.setMap(map);
        // if (this_.map_obj.lng) {
        //

        //   marker.setLabel({
        //     offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
        //     content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
        //     direction: "right" //设置文本标注方位
        //   });
        // }
      }
      function icon_() {
        // 创建 AMap.Icon 实例：
        var icon = new AMap.Icon({
          size: new AMap.Size(26, 32), // 图标尺寸
          // image: require(`../assets/img/${item.flag}.png`),

          image:
            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(26, 32) // 根据所设置的大小拉伸或压缩图片
        });
        return icon;
      }

      function add_weather_marker(weather) {
        var marker_arr = [];
        var marker = {};
        weather.forEach(item => {
          // 创建 AMap.Icon 实例：
          var icon = new AMap.Icon({
            size: new AMap.Size(26, 32), // 图标尺寸
            image: require(`../assets/img/${item.flag}.png`),

            // image:
            // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // Icon的图像
            // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(26, 32) // 根据所设置的大小拉伸或压缩图片
          });
          // 在创建完merker的实例后
          marker = new AMap.Marker({
            // icon:
            // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            icon: icon,
            position: [item.lng, item.lat],
            offset: new AMap.Pixel(-13, -32),
            title: item.name
          });
          // 将自身信息挂载到 marker 实例上 共弹出框使用
          marker.obj = item;
          // 将所有marker 对象整合在一个数组
          marker_arr.push(marker);
          // 注册点击事件
          marker.on("click", function(e) {
            // console.log(e);
            // 组件传值 将信息挂载到 第二个参数 触发事件
            this_.$emit("alert_obj", e.target.obj);
          });
          // marker.setMap(map);
        });
        map.add(marker_arr);
        // console.log(marker);
      }
      // console.log(this.map_obj);
      if (this.weather_list) {
        add_weather_marker(this.weather_list);
      }

      if (this.map_obj) {
        addMarker(this.map_obj);
      }
      map.setFitView();
      map.plugin(["AMap.Scale"], function() {
        var scale = new AMap.Scale();
        map.addControl(scale);
      });
      //   map.on("click", function(e) {
      //
      //   });

      //绘图区域点击后要执行的方法：弹出信息
      // var info;
      // function openInfo(e) {
      //   infoWindow = new AMap.InfoWindow({
      //     content: info.join("") //使用默认信息窗体框样式，显示信息内容
      //   });

      //   infoWindow.open(map, [e.lnglat.getLng(), e.lnglat.getLat()]);
      //   document.getElementById("lnglat").value =
      //     e.lnglat.getLng() + "," + e.lnglat.getLat();
      // }
    }
  }
};
</script>

<style lang='less' scoped>
.amap-marker-label {
  width: 60px;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  height: 18px;
  font-family: STLiti;
  color: green;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.4);
  border: solid 2px rgba(100, 255, 200, 0.8);
}
.map_box {
  width: 100%;
  height: 300px;
  position: relative;
  .amap-container {
    width: 100% !important;
  }
}
</style>
